<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
	xmlns:mywidgets="http://xmlns.jcp.org/jsf/composite/widgets"
	xmlns:fn="http://xmlns.jcp.org/jsp/jstl/functions"
	xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
>

<ui:composition template="/templates/photoTemplate.xhtml">

	<ui:define name="title">
		#{i18N.getTrans('Reservations')}	
	</ui:define>

	<ui:define name="body">

		<h1>All Future Reservations</h1>

		<script>
		$(function() {
			$(document).tooltip({
			track: true
			});

			$('input:visible:enabled:first').focus();

			$('form:first *:input[type!=hidden]:first').focus();
		});
		</script>

		<h:form>

			<h:inputText autocomplete="true" style="width: 300px"
				value="#{reservationsController.nameFilter}"
				pt:placeholder="Family Name, Givenname or Email" pt:autofocus="true"
				title="Use first letters for tenants, full email address or a domain name."
			>
				<f:ajax event="keyup" execute="@form" render="resTable" />
			</h:inputText>
			
			<label><h:selectBooleanCheckbox id="includePassedReservations" value="#{reservationsController.includePassedReservations}" >
				<f:ajax event="click" execute="@form" render="resTable"/>
			</h:selectBooleanCheckbox>include passed reservations, too
			
			</label>

			<p class="betweenSections" />


			<h:dataTable id="resTable"
				value="#{reservationsController.findOngoingReservations()}"
				var="reservation" styleClass="data-table" headerClass="table-header"
				rowClasses="table-odd-row,table-even-row"
				columnClasses="reservationColumnCenter,reservationColumnCenter,reservationColumnNothing,reservationColumnCenter,reservationColumnNothing,reservationColumnCenter,reservationColumnCenter,reservationColumnCenter,reservationColumnMoney,reservationColumnMoney"
			>

				<!-- 
				<f:facet name="header">
					<h:outputText value="Reservations" />
				</f:facet>
 				-->

				<h:column>
					<!-- column header -->
					<f:facet name="header">State</f:facet>
					<!-- row record -->
					<h:button value="view" styleClass="mini"
						outcome="reservationdetail.brayan"
					>
						<f:param name="id" value="#{reservation.id}" />
					</h:button>
				</h:column>
				<h:column>
					<f:facet name="header">State</f:facet>
    				#{i18N.getTrans(reservation.reservationState)}
    			</h:column>
				<h:column sortBy="#{reservation.tenant}"
					filterExpression="#{empty filterValue or fn:startsWith(reservation.tenant.surname, filterValue)}"
					filterValue="#{reservationsController.nameFilter}"
				>
					<f:facet name="header">Family Name, Givenname</f:facet>
					<h:outputText value="#{reservation.tenant.surname}" />, <h:outputText
						value="#{reservation.tenant.givenname}"
					/>
				</h:column>
				<h:column>
					<f:facet name="header">Country</f:facet>
    				#{reservation.tenant.countryCode}
    			</h:column>
				<h:column>
					<f:facet name="header">Email</f:facet>
    				#{reservation.tenant.email}
    			</h:column>
    			
    			<h:column>
					<f:facet name="header">Number <br/>of Guests</f:facet>
    				#{reservation.numberOfGuests}
    			</h:column>

				<h:column>
					<f:facet name="header">Start<br />End</f:facet>
					<span title="rental request received on #{reservation.dateCreated}">
						<h:outputText value="#{reservation.startDate}">
							<f:convertDateTime pattern="d. MMM. yy" />
							<br />
						</h:outputText><br /> <h:outputText value="#{reservation.endDate}">
							<f:convertDateTime pattern="d. MMM. yy" />
						</h:outputText>
					</span>
				</h:column>
				<h:column headerClass="table-header-sub">
					<f:facet name="header">Days<br/> Nights</f:facet>   
						#{reservationController.getNumberOfDays(reservation)} 	
						<br/> #{reservationController.getNumberOfDays(reservation) - 1}						
    			</h:column>
				<h:column>
					<f:facet name="header">Total</f:facet>
					<h:outputText value="#{reservation.costs.totalCosts}">
						<f:convertNumber type="currency" currencySymbol="€"
							maxFractionDigits="2"
						/>
					</h:outputText>
				</h:column>
				<h:column headerClass="table-header-sub">
					<f:facet name="header">Rent<br />Cleaning<br />Tax</f:facet>
					<h:outputText value="#{reservation.costs.reservationCosts}">
						<f:convertNumber type="currency" currencySymbol="€"
							maxFractionDigits="2"
						/>
					</h:outputText>
					<br />
					<h:outputText value="#{reservation.costs.cleaningFee}">
						<f:convertNumber type="currency" currencySymbol="€"
							maxFractionDigits="2"
						/>
					</h:outputText>
					<br />
					<h:outputText value="#{reservation.costs.vatAmount}">
						<f:convertNumber type="currency" currencySymbol="€"
							maxFractionDigits="2"
						/>
					</h:outputText>
				</h:column>

			</h:dataTable>

		</h:form>

		<p class="betweenSections" />

	</ui:define>
</ui:composition>
</html>
